<template>
    <div class="basic step-box">
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            style="max-width: 1080px"
            :disabled="pageType === 'look'">
            <el-form-item label="使用成员" prop="online_type">
                <el-radio-group v-model="ruleForm.online_type" @change="changeRadio">
                    <el-radio :label="1">全天在线</el-radio>
                    <el-radio :label="2">周期在线</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item v-show="ruleForm.online_type == '1'">
                <div>
                    <div class="form-staffs staffsLine">
                        <p class="title"><span class="title_icon">*</span>员工选择</p>
                        <el-button class="select-staffs" :disabled="pageType === 'look'" @click="openDepart">
                            选择员工
                        </el-button>
                    </div>
                    <div class="staffs mr_b">
                        <el-tag
                            v-for="tag in tags"
                            :key="tag.name"
                            class="staffs_item"
                            :closable="!(pageType == 'look')"
                            @close="handleClose(tag)">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                </div>
                <div class="standby">
                    <span style="padding-right: 16px">备用员工</span>
                    <el-select
                        v-model="ruleForm.reserve_user"
                        placeholder="请选择备用员工"
                        collapse-tags
                        collapse-tags-tooltip
                        multiple
                        popper-class="zw-hide_select_option"
                        @click="mustCus"
                        @change="changeDepart">
                        <el-option v-for="item in mustCreators" :key="item.id" :label="item.name" :value="item.id">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                    <p class="standby_text">当活码中所有员工均不可接待时，将分配给该员工</p>
                </div>
            </el-form-item>
            <el-form-item v-show="ruleForm.online_type == '2'">
                <span class="period_title">
                    周期在线：1、可用于员工早晚班等不同上班时间使用；2、员工在非线上时间将不再接待新客户。
                </span>
                <div v-for="(item, index) in jobTimeList" :key="item.id" class="form_outer">
                    <div class="form-staffs">
                        <p class="title"><span class="must_icon">*</span>员工选择</p>
                        <div class="staffs">
                            <el-tag
                                v-for="tag in item.cusArr"
                                :key="tag.name"
                                class="staffs_item"
                                :closable="!(pageType == 'look')"
                                @close="handleClose(tag, index)">
                                {{ tag.name }}
                            </el-tag>
                        </div>
                    </div>
                    <el-button class="select-staffs" :disabled="pageType === 'look'" @click="openDepart(item, index)">
                        选择员工
                    </el-button>
                    <div class="select-week">
                        <div class="title"><span class="must_icon">*</span>工作周期</div>
                        <div class="weeks">
                            <el-select
                                v-model="item.week"
                                multiple
                                filterable
                                allow-create
                                default-first-option
                                :reserve-keyword="false"
                                placeholder="请选择工作周期"
                                style="width: 500px">
                                <el-option
                                    v-for="i in options"
                                    :key="i.value"
                                    class="select_week"
                                    :value="i.value"
                                    :label="i.label">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="select-time">
                        <div class="time_title"><span class="must_icon">*</span>上线时间</div>
                        <el-time-picker
                            v-model="item.cycle_time"
                            value-format="HH:mm:ss"
                            is-range
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间" />
                    </div>
                    <div v-show="pageType !== 'look'" class="delTime_icon" @click="delJob(item)"></div>
                </div>
                <div v-show="pageType !== 'look'" class="addJob" @click="addJob">添加其他工作周期</div>
                <div v-show="pageType === 'look'" class="addJob">添加其他工作周期</div>
                <div class="standby">
                    <span class="must_icon">*</span>
                    <span style="padding-right: 16px">备用员工</span>
                    <el-select
                        v-model="ruleForm.reserve_user"
                        placeholder="请选择备用员工"
                        multiple
                        popper-class="zw-hide_select_option"
                        @click="mustCus"
                        @change="changeDepart">
                        <el-option v-for="item in mustCreators" :key="item.id" :label="item.name" :value="item.id">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                    <p class="standby_text">当活码中所有员工均不可接待时，将分配给该员工</p>
                </div>
            </el-form-item>
            <el-form-item label="员工添加上限" style="margin-top: 18px">
                <!-- <el-switch v-model="ruleForm.online_flag" :active-value="1" :inactive-value="2" /> -->
                <Table ref="filterTable" :all-cus-list="allCusList"></Table>
            </el-form-item>
            <el-form-item label="自动通过验证" prop="verify_flag" style="margin-top: 14px">
                <el-switch v-model="ruleForm.verify_flag" :active-value="1" :inactive-value="2" />
            </el-form-item>
            <el-form-item>
                <el-radio-group v-show="ruleForm.verify_flag === 1" v-model="ruleForm.verify_type" style="height: 44px">
                    <el-radio :label="1">全天开启</el-radio>
                    <el-radio :label="2">定时开启</el-radio>
                </el-radio-group>
                <div v-show="ruleForm.verify_type == 2">
                    <div v-for="item in addTimeNum" :key="item.id" class="block">
                        <el-time-picker
                            v-model="item.verify_time"
                            is-range
                            range-separator="至"
                            value-format="HH:mm:ss"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间" />
                        <!-- <el-time-picker v-model="addTimeNum[index].verify_time" is-range range-separator="至" value-format="HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间" /> -->
                        <div class="del_time" @click="delTime(item)"></div>
                    </div>
                </div>
                <div v-show="ruleForm.verify_type === 2 && ruleForm.verify_flag != 2" class="addTime" @click="addTime">
                    添加
                </div>
            </el-form-item>
            <!-- <el-form-item label="客户标签" prop="tag_flag">
        <el-switch v-model="ruleForm.tag_flag" :active-value="1" :inactive-value="2" />
      </el-form-item> -->
            <el-form-item label="客户标签">
                <ul class="cli_tags">
                    <li v-for="item in AllTags" :key="item.id" class="cli_tags_item">
                        <span class="title">{{ item.name }}</span>
                        <span v-if="pageType !== 'look'" class="icon" @click="delTag(item)">X</span>
                        <span v-else class="icon">X</span>
                    </li>
                </ul>
                <el-button :disabled="pageType === 'look'" @click="openBatchLabel('formData')">选择标签</el-button>
            </el-form-item>
            <el-form-item label="微信备注" style="margin-top: 14px">
                <el-switch v-model="ruleForm.remark_flag" :active-value="1" :inactive-value="2" />
            </el-form-item>
            <el-form-item v-show="ruleForm.remark_flag === 1">
                <div class="cusRemark">
                    <p class="cusRemark_icon"></p>
                    <p class="cusRemark_title">开启后可为客户昵称添加备注，方便查看客户来源</p>
                </div>
            </el-form-item>
            <el-form-item v-show="ruleForm.remark_flag === 1" label="备注" label-width="200px" prop="remark">
                <el-input
                    v-model="ruleForm.remark"
                    class="cusRemarkText"
                    maxlength="15"
                    show-word-limit
                    placeholder="请输入备注">
                </el-input>
            </el-form-item>
            <el-form-item v-show="ruleForm.remark_flag === 1" label="预览" label-width="200px">
                <el-input v-model="ruleForm.remark" disabled placeholder="这里是备注" class="preview">
                    <template #prepend>
                        <div class="remark_title">
                            <div class="left_icon">
                                <img src="@/assets/image/LiveCode/kehu_icon.png" alt="" />
                            </div>
                            <p style="margin-top: -1px">客户名称</p>
                        </div>
                    </template>
                </el-input>
            </el-form-item>
            <!-- <el-form-item label="客户备注">
        <el-switch v-model="ruleForm.desc_flag" :active-value="1" :inactive-value="2" />
        <div v-show="ruleForm.desc_flag === 1" class="cusRemark">
          <p class="cusRemark_icon"></p>
          <p class="cusRemark_title">
            开启后可为客户昵称添加备注，方便查看客户来源，
            <span style="color: #ff6b00; cursor: pointer" @click="examine">查看示例</span>
          </p>
        </div>
        <el-input v-show="ruleForm.desc_flag === 1" class="textarea" v-model="ruleForm.desc" maxlength="15" placeholder="请输入客户描述" rows="10" show-word-limit type="textarea" />
      </el-form-item> -->
        </el-form>
    </div>
    <!-- <div class="btns">
        <el-button @click="resetForm(ruleFormRef)">上一步</el-button>
        <el-button type="primary" @click="next(ruleFormRef)">下一步</el-button>
    </div> -->
    <Dialog :app-dialog="appDialog">
        <div class="examine">
            <div class="examine_top">
                <el-image
                    class="examine_img"
                    style="width: 60px; height: 60px"
                    fit="contain"
                    src="https://pic2.zhimg.com/80/v2-ac6701550309bc767decef3285216b04_720w.jpg?source=1940ef5c"></el-image>
                <div class="examine_info">
                    <p class="examine_info_name">张无忌Jason（{{ ruleForm.remark }}）</p>
                    <div class="ex_phone">
                        <div class="info_icon">男</div>
                        <div class="info_text">152 **** 8011</div>
                    </div>
                </div>
            </div>
            <div class="describe">描述：{{ ruleForm.desc }}</div>
        </div>
    </Dialog>
    <!-- <ZWDepart2 ref="DepartRef2" @submit="getDepart2" /> -->
    <ZWDepart3 ref="DepartRef3" :type="1" @submit="getDepart" />
    <MustDepart ref="mustRef" :type="1" @submit="getStandby"></MustDepart>
    <ZWSelectTag ref="searchSelectRef" @submit="getTags" />
    <!-- 批量标签弹框 -->
    <BatchLabel ref="BatchLabelRef" @save="getTagsFun" />
</template>

<script lang="ts" setup>
import { reactive, ref, watch, onMounted, computed } from 'vue';
import ZWSelectTag from './ZWSelectTag.vue';
import ZWDepart2 from './ZWDepart2.vue';
import ZWDepart3 from '@/components/ZWDepart.vue';
import MustDepart from '@/components/ZWDepart.vue';
import Table from './Table.vue';
import Dialog from '@/components/Dialog.vue';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';
import { getSetionId } from '@/utils/utils';
import BatchLabel from '@/components/BatchLabel.vue';
import { deepCopy } from '@/utils/helper';
import { mapState } from 'vuex';
import { useStore } from '@/store';

import { getContentHeight } from '@/utils/utils';

const store = useStore();
const props = withDefaults(defineProps<{ pageType: string }>(), {
    pageType: 'new'
});
const arrTime = ref([]);

const emit = defineEmits(['next', 'resetForm']);
const ruleFormRef = ref<FormInstance>(); //校验的 type 类型
const DepartRef = ref<null | HTMLElement>(null); // 部门弹框类型
const DepartRef2 = ref<null | HTMLElement>(null); // 部门弹框类型
const DepartRef3: any = ref<null | HTMLElement>(null); // 部门弹框类型
const searchSelectRef = ref<null | HTMLElement>(null); // 选择标签弹框
const mustRef: any = ref(null);
const BatchLabelRef = ref(null);

const filterTable = ref(); // 获取 table 数据

const creators = ref([]); // 创建人options
const creators2 = ref([]); // 创建人options
const mustCreators: any = ref([]);
const newCusIndex = ref(); // 选择员工索引值
const AllTags = ref([]); // 选择标签options
const isMustCus = ref(false); //是否为必选员工
const reserve_user_obj = ref([]); // 必选员工对象
const startTime = ref(); // 开始时间
const endTime = ref(); //结束时间
const startIndex = ref(); // 开始时间索引
const endIndex = ref(); // 开始时间索引
const tabsList = ref([]);

// 添加工作周期
const jobTimeList = ref([
    // { id: 0, cusArr: [], user: [], jobArr: [], week: [], start_at: [] },
]); // 添加工作周期
const cycleData = ref([]);
const reserve_user = ref([]); // 必选员工数据
const allCusList = ref([]); //table 数据
// 开启定时时间框收集数据
const addTimeNum = ref([]);
const options = [
    {
        value: '1',
        label: '周一'
    },
    {
        value: '2',
        label: '周二'
    },
    {
        value: '3',
        label: '周三'
    },
    {
        value: '4',
        label: '周四'
    },
    {
        value: '5',
        label: '周五'
    },
    {
        value: '6',
        label: '周六'
    },
    {
        value: '7',
        label: '周日'
    }
];
const labelObj = {
    type: '', //当前打开选择标签是哪个类型
    data: [] //选中标签的数据存储
};
const tableOne = ref([]);
const tableTow = ref([]);
// 收集的 form 数据
const ruleForm = ref({
    online_type: 1, //在线周期
    whole_user: [], // 全天成员
    reserve_user: [], // 周期备用成员
    // online_flag: 1, // 添加上线
    verify_flag: 1, //自动验证
    verify_type: 1, //全天开启
    verify_time: [], // 上线时间
    tag_flag: 1, // 客户标签
    user_id: [], // 员工选择id
    remark_flag: 1, //客户备注
    remark: '', // 备注内容
    desc_flag: 1, // 客户描述
    desc: '', // 客户描述文本
    tag_list: [] // 客户标签 id
});
//标签数据
const tags = ref([]);
//标签移除
const handleClose = (tag: any, index?: any) => {
    if (ruleForm.value.online_type == 2) {
        const itemTag = jobTimeList.value[index].cusArr;
        const num = itemTag.findIndex((item: any) => item.id == tag.id);
        itemTag.splice(num, 1);
        jobTimeList.value[index].user.splice(num, 1);
        const i = allCusList.value.findIndex((item: any) => item.id == tag.id);
        const result = jobTimeList.value.map((item: any) => item.user).flat();
        if (!result.includes(tag.id)) {
            allCusList.value.splice(i, 1);
            filterTable.value.fatherData(allCusList.value, tag.id, 1);
        }
    } else {
        const indexTag = tags.value.findIndex((item: any) => item.id == tag.id);
        const indexUser = ruleForm.value.whole_user.findIndex((item: any) => item == tag.id);
        tags.value.splice(indexTag, 1);
        ruleForm.value.whole_user.splice(indexUser, 1);
        // allCusList.value = tags.value
        filterTable.value.fatherData(allCusList.value, tag.id, 1);
    }
};

// 规则
const rules = reactive({
    online_type: [
        {
            required: false,
            message: '请选择使用成员',
            trigger: 'change'
        }
    ],
    online_flag: [{ required: false, message: '请选择员工添加上线', trigger: 'change' }],
    verify_flag: [{ required: true, message: '请选择是否自动验证', trigger: 'change' }],
    tag_flag: [{ required: false, message: '请开启客户标签', trigger: 'change' }],
    remark_flag: [{ required: true, message: '请开启客户备注', trigger: 'change' }],
    remark: [{ required: true, message: '请填写备注', trigger: 'change' }],
    desc_flag: [{ required: true, message: '请开启客户描述', trigger: 'change' }]
});
const deteleObject = (obj: any) => {
    const uniques = [];
    const stringify = {};
    for (let i = 0; i < obj.length; i++) {
        const keys = Object.keys(obj[i]);
        keys.sort(function (a, b) {
            return Number(a) - Number(b);
        });
        let str = '';
        for (let j = 0; j < keys.length; j++) {
            str += JSON.stringify(keys[j]);
            str += JSON.stringify(obj[i][keys[j]]);
        }
        if (!stringify.hasOwnProperty(str)) {
            uniques.push(obj[i]);
            stringify[str] = true;
        }
    }
    return uniques;
};
// 获取部门成员
const getDepart = (res: any) => {
    const itemTag = jobTimeList.value[newCusIndex.value];
    if (ruleForm.value.online_type == 1) {
        creators.value = deepCopy(deteleObject(res));
        allCusList.value = [];
        creators.value.map(item => {
            item.limit = 100;
        });
        tags.value = creators.value;
        allCusList.value = tags.value;
        tableOne.value = allCusList.value;
        ruleForm.value.whole_user = getSetionId('id', creators.value);
    } else if (ruleForm.value.online_type == 2) {
        creators2.value = deepCopy(res);
        itemTag.user = [];
        creators2.value.map(item => {
            item.limit = 100;
            itemTag.user.push(item.id);
        });
        itemTag.cusArr = creators2.value;

        const tableArr = jobTimeList.value.map((item: any) => item.cusArr);
        allCusList.value = tableArr.flat();
        const arr = allCusList.value.filter((x, index, self) => {
            const newArr: any[] = [];
            allCusList.value.forEach(item => {
                newArr.push(item.id);
            });
            const res = newArr.indexOf(x.id) === index;
            return res;
        });
        allCusList.value = arr;
        tableTow.value = allCusList.value;
    }
    // isMustCus.value = false
};
const changeRadio = (val: any) => {
    if (val == 1) {
        allCusList.value = tableOne.value;
    } else {
        allCusList.value = tableTow.value;
    }
};

//打开新建选择人
const openDepart = (item?: any, num?: any) => {
    const { online_type } = ruleForm.value;
    newCusIndex.value = num;
    DepartRef3.value.appDialog.title = '选择员工';
    DepartRef3.value.isQRAuth = true;
    DepartRef3.value.departVisble = true;
    if (online_type === 1 && tags.value.length != 0) {
        DepartRef3.value.selectedMember = tags.value;
    } else if (online_type === 2 && jobTimeList.value[num].cusArr.length != 0) {
        DepartRef3.value.selectedMember = jobTimeList.value[num].cusArr;
    } else {
        DepartRef3.value.selectedMember = [];
    }
};
// 获取时间的索引
const getHour1 = (index: any) => {
    startIndex.value = index;
};
const getHour2 = (index: any) => {
    endIndex.value = index;
};
// 删除工作时间
const delJob = (data: any) => {
    const index = jobTimeList.value.findIndex(item => {
        return item.id == data.id;
    });
    const res = jobTimeList.value[index]?.cusArr.map((i: any) => i.id);
    jobTimeList.value.splice(index, 1);
    const all_data: any = jobTimeList.value.map((item: any) => item.cusArr).flat();
    const { filterData } = filterTable.value;
    filterData.map((item: any) => {
        all_data.map((i: any) => {
            if (item.id === i.id) {
                i.limit = item.limit;
            }
        });
    });
    allCusList.value = all_data;
    filterTable.value.fatherData(allCusList.value, res, 2);
};

//添加其他工作周期
const addJob = () => {
    jobTimeList.value.push({
        id: jobTimeList.value.length,
        cusArr: [],
        user: [],
        jobArr: [],
        week: [],
        cycle_time: []
    });
    cycleData.value = jobTimeList.value;
};
const isShowMust = () => {
    const arr: number[] = [];
    jobTimeList.value.map((item: any) => {
        if (item.user.length <= 0) {
            arr.push(1);
        }
    });
    return arr;
};
const getAllCust = () => {
    const arr: number[] = [];
    jobTimeList.value.map((item: any) => {
        if (item.user.length > 0) {
            item.user.map((n: number) => {
                arr.push(n);
            });
        }
    });
    return arr;
};
// 必选备用工作员工
const mustCus = () => {
    if (props.pageType == 'look') return;
    isMustCus.value = true;
    mustRef.value.isQRAuth = true;
    mustRef.value.departVisble = true;
    mustRef.value.selectedMember = mustCreators.value;
    mustRef.value.appDialog.title = '备用员工';
};
// 获取备用员工
const getStandby = (data: any) => {
    mustCreators.value = data;
    ruleForm.value.reserve_user = getSetionId('id', mustCreators.value);
};
const changeDepart = (data: any) => {
    const removeDepart = mustCreators.value.find((item: any) => !data.includes(item.id));
    const arr: any[] = mustCreators.value.filter((item: any) => data.includes(item.id));
    ruleForm.value.reserve_user = getSetionId('id', arr);
    mustCreators.value = arr;
    // DepartRef2.value.removeItem(removeDepart)
};
// 定时开启中添加时间框
const addTime = () => {
    const index = 1;
    addTimeNum.value.push({ id: addTimeNum.value.length, verify_time: [] });
};
// 定时开启中删除时间框
const delTime = (data: any) => {
    if (props.pageType === 'look') return;
    const num = addTimeNum.value.findIndex((item: any) => item.id == data.id);
    addTimeNum.value.splice(num, 1);
};
// 选择标签
const selectTag = () => {
    searchSelectRef.value.showCreatTag = true;
    searchSelectRef.value.appDialog.visible = true;
    searchSelectRef.value.selectTags = AllTags.value;
};
// 获取标签
const getTags = (data: any) => {
    AllTags.value = data;
    ruleForm.value.tag_list = getSetionId('id', data);
};
// 删除客户标签
const delTag = (data: any) => {
    const index = AllTags.value.findIndex((item: any) => item.id == data.id);
    AllTags.value.splice(index, 1);
    // AllTags.value.splice(AllTags.value.indexOf(data.id), 1)
    ruleForm.value.tag_list = getSetionId('id', AllTags.value);
};
const changeLabel = (value: any) => {
    tabsList.value = tabsList.value.filter((item: any) => item.id == value);
};
// 打开选择标签弹框
const openBatchLabel = (type: string) => {
    labelObj.type = type;
    BatchLabelRef.value.hasConditiion = false;
    BatchLabelRef.value.dialogData.labelChooseType = type == 'formData' ? 2 : 1;
    BatchLabelRef.value.chooseDataArr = [];
    if (tabsList.value.length > 0 && type == 'formData') {
        BatchLabelRef.value.chooseDataArr = [...AllTags.value];
    }
    BatchLabelRef.value.dialogVisible = true;
};
// 获取当前选中的标签数据
const getTagsFun = (val: any) => {
    if (labelObj.type == 'formData') {
        AllTags.value = [...val.data];
        tabsList.value = [...val.data];
        ruleForm.value.tag_list = val.idList;
    }
};

// 清空 form 表单
const resetForm = (formEl: FormInstance | undefined) => {
    emit('resetForm');
};
const arr = () => {
    return cycleData.value;
};
const next = async () => {
    let isShow = true;
    if (props.pageType != 'look') {
        const { online_type, verify_type, verify_flag, reserve_user } = ruleForm.value;
        if (online_type == 2 && jobTimeList.value.length != 0) {
            jobTimeList.value.map((item: any) => {
                if (item.cusArr.length == 0) {
                    isShow = false;
                    ElMessage.warning('请选择周期在线员工');
                    return;
                } else if (item.week.length == 0) {
                    isShow = false;
                    ElMessage.warning('请选择工作周期');
                    return;
                } else if (item.cycle_time.length == 0) {
                    isShow = false;
                    ElMessage.warning('请选择上线时间');
                    return;
                } else {
                    isShow = true;
                }
            });
        }
        if (tags.value.length <= 0 && jobTimeList.value.length <= 0) {
            if (jobTimeList.value.length <= 0 && online_type === 2) {
                ElMessage.warning('请添加工作周期');
                return;
            } else {
                ElMessage.warning('请选择员工');
                return;
            }
        } else if (online_type == 2 && reserve_user.length == 0 && isShow) {
            ElMessage.warning('请选择备用员工');
            return;
        } else if (verify_flag == 1 && verify_type === 2 && addTimeNum.value.length <= 0) {
            ElMessage.error('请选定时开启时间');
            return;
        } else if (!ruleFormRef.value) return;
    }
    await ruleFormRef.value.validate((valid, fields) => {
        if (valid && isShow) {
            const depCust = deepCopy(jobTimeList.value);
            const cycleArr = depCust.filter((item: any) => {
                delete item.id;
                delete item.cusArr;
                delete item.jobArr;
                return item;
            });
            const verify_time: { start_at: any; end_at: any }[] = [];
            if (addTimeNum.value) {
                addTimeNum.value.map((item: any) => {
                    verify_time.push(item.verify_time);
                });
            }
            const params = {
                online_type: ruleForm.value.online_type,
                whole_user: ruleForm.value.whole_user,
                reserve_user: ruleForm.value.reserve_user,
                cycle: cycleArr,
                // online_flag: ruleForm.value.online_flag,
                online_limit: filterTable.value.online_limit,
                verify_flag: ruleForm.value.verify_flag,
                verify_type: ruleForm.value.verify_type,
                verify_time,
                tag_flag: ruleForm.value.tag_flag,
                tag_list: ruleForm.value.tag_list,
                remark_flag: ruleForm.value.remark_flag,
                // remark_type: ruleForm.value.remark_type,
                remark: ruleForm.value.remark,
                desc_flag: ruleForm.value.desc_flag,
                desc: ruleForm.value.desc
            };
            store.dispatch('groupCode/basicSetting', params);
            emit('next');
        } else {
            return;
        }
    });
};
const examine = () => {
    appDialog.visible = true;
};
const appDialog = reactive({
    visible: false,
    title: '查看示例',
    width: '800px',
    cancelText: '',
    submitText: '',
    isInit: false, //是否重置
    isChooseDisabled: false, //重新打开传递进来的数据是否重置
    chooseArr: [] // 传递进来选中的数据
});
watch(
    () => ruleForm.value.online_type,
    val => {
        if (val === 2) {
            // tags.value = []
            // allCusList.value = []
            // reserve_user_obj.value = []
            // creators.value = []
        } else if (val === 1) {
            // jobTimeList.value = [
            // ]
            // allCusList.value = []
        }
    },
    { deep: true }
);
watch(
    () => ruleForm.value.remark_flag,
    val => {
        if (val == 2) {
            rules.remark[0].required = false;
        } else {
            rules.remark[0].required = true;
        }
    },
    { deep: true }
);
watch(
    () => ruleForm.value.tag_flag,
    val => {
        if (val == 2) {
            rules.tag_flag[0].required = false;
        } else {
            rules.tag_flag[0].required = true;
        }
    },
    { deep: true }
);
watch(
    () => ruleForm.value.verify_flag,
    val => {
        if (val == 2) {
            rules.verify_flag[0].required = false;
        } else {
            rules.verify_flag[0].required = true;
        }
    },
    { deep: true }
);
const getLook = () => {
    const activityInfo = store.state.groupCode.lookList;
    if ((activityInfo && props.pageType == 'look') || props.pageType == 'edit') {
        ruleForm.value.online_type = activityInfo.online_type;
        // ruleForm.value.online_flag = activityInfo.online_flag
        // ruleForm.value.reserve_user = activityInfo.reserve_user
        ruleForm.value.verify_flag = activityInfo.verify_flag;
        ruleForm.value.verify_type = activityInfo.verify_type;
        ruleForm.value.tag_flag = activityInfo.tag_flag;
        ruleForm.value.remark_flag = activityInfo.remark_flag;
        // ruleForm.value.remark_type = activityInfo.remark_type
        ruleForm.value.remark = activityInfo.remark;
        ruleForm.value.desc_flag = activityInfo.desc_flag;
        ruleForm.value.desc = activityInfo.desc;
        tags.value = activityInfo.whole_user;
        AllTags.value = activityInfo.tag_list;
        tabsList.value = activityInfo.tag_list;
        mustCreators.value = activityInfo.reserve_user;

        if ((activityInfo.cycle && props.pageType == 'look') || props.pageType == 'edit') {
            if (activityInfo.cycle) {
                const jobArr: any = activityInfo.cycle.map((item: any) => {
                    const arr = [];
                    item.user.forEach((i: any) => {
                        arr.push(i.id);
                    });
                    return {
                        id: item.id,
                        cusArr: item.user,
                        user: arr,
                        jobArr: [],
                        week: item.week,
                        cycle_time: item.cycle_time.filter(v => v)
                    };
                });
                jobTimeList.value = jobArr;
            }
            if (activityInfo.reserve_user && activityInfo.reserve_user.length > 0) {
                activityInfo.reserve_user.map((item: any) => {
                    ruleForm.value.reserve_user.push(item.id);
                });
            }
            if (activityInfo.tag_list && activityInfo.tag_list.length > 0) {
                activityInfo.tag_list.forEach((item: any) => {
                    ruleForm.value.tag_list.push(item.id);
                });
            }
            if (activityInfo.whole_user && activityInfo.whole_user.length) {
                activityInfo.whole_user.forEach((item: any) => {
                    ruleForm.value.whole_user.push(item.id);
                });
            }
            allCusList.value = activityInfo.online_limit.filter((item: any) => item.user_id == null);
            // allCusList.value = activityInfo.online_limit

            if (activityInfo.online_type == 1) {
                tableOne.value = activityInfo.online_limit;
            }
            if (activityInfo.online_type == 2) {
                tableTow.value = activityInfo.online_limit;
            }
            if (activityInfo.verify_time) {
                activityInfo.verify_time.map((item: any) => {
                    addTimeNum.value.push({ id: addTimeNum.value.length, verify_time: item });
                });
            }
        }
    }
};

const contentHeight = computed(() => getContentHeight(350));
defineExpose({
    resetForm,
    next
});
onMounted(() => {
    getLook();
});
</script>

<style lang="scss" scoped>
.basic {
    background-color: #fff;

    .standby_text {
        margin-left: 8px;
    }

    .el-form-item {
        margin-bottom: 0;
    }

    .form-staffs {
        display: flex;

        .title {
            margin-right: 12px;

            &_icon {
                color: #ff6b00;
            }
        }
    }

    .mr_b {
        margin-bottom: 16px;
    }

    .staffs_item {
        margin-right: 10px;
    }

    .staffs_item::before {
        content: '';
        display: inline-block;
        width: 10px;
        height: 11px;
        background: url('@/assets/image/LiveCode/people_icon.png') center/100% no-repeat;
        margin-right: 10px;
    }

    .staffsLine {
        height: 46px;
    }

    .select-week {
        display: flex;
        align-items: center;

        .title {
            margin-right: 12px;
        }

        .weeks {
            display: flex;
            align-items: center;
            border-radius: 5px;

            &_tag {
                display: flex;
                align-items: center;
                color: #33302d;
                font-size: 14px;
                padding: 0 8px;
                margin-right: 12px;
                line-height: 22px;
                background: #f9f9f9;
                border: 1px solid #eaeaea;
                border-radius: 2px;

                .week_icon {
                    margin-left: 16px;
                    color: #d9d9d9;
                    cursor: pointer;
                }
            }
        }
    }

    .period_title {
        padding: 8px 10px;
        background: #f9f9f9;
    }

    .form_outer {
        margin-top: 28px;
        padding: 5px 15px 10px;
        border: 1px solid #eaeaea;
        box-sizing: border-box;
        position: relative;
    }

    .select-staffs {
        margin-bottom: 20px;
    }

    .select-time {
        display: flex;
        align-items: center;
        margin-top: 15px;

        .time_title {
            margin-right: 12px;
        }

        :deep(.select_week) {
            display: flex;
            align-items: center;
        }
    }

    .delTime_icon {
        width: 17px;
        height: 16px;
        background: url('@/assets/image/LiveCode/del_icon.png') center/100% no-repeat;
        position: absolute;
        top: 0;
        right: -30px;
    }

    .addJob {
        width: 144px;
        text-align: center;
        line-height: 36px;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        cursor: pointer;
        margin: 20px 0;
    }

    .block {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .time_border {
            width: 14px;
            margin: 0 13px;
            border-top: 1px solid #969696;
        }

        .del_time {
            width: 17px;
            height: 16px;
            margin-left: 10px;
            background: url('@/assets/image/LiveCode/del_icon.png') center/100% no-repeat;
        }
    }

    .addTime {
        width: 60px;
        line-height: 36px;
        color: #969696;
        text-align: center;
        border: 1px solid #eaeaea;
        border-radius: 4px;
        margin: 0 0 20px;
        cursor: pointer;
    }

    .standby {
        display: flex;
        align-items: center;

        &_btn {
            width: 167px;
            line-height: 36px;
            margin-right: 6px;
            color: #969696;
            text-align: center;
            border: 1px solid #eaeaea;
            border-radius: 4px;
            cursor: pointer;
        }
    }

    .cli_tags {
        display: flex;
        align-items: center;
        color: #ff6b00;
        font-size: 14px;

        &_item {
            padding: 0 8px;
            line-height: 22px;
            border: 1px solid #ffc69e;
            border-radius: 2px;
            background: #fffaf9;
            margin: 10px 6px 10px 0;

            .icon {
                cursor: pointer;
                margin-left: 7px;
            }
        }
    }

    .cusRemark {
        display: flex;
        align-items: center;
        line-height: 40px;
        padding: 0 20px;
        margin: 10px 0 20px;
        box-sizing: border-box;
        background: #fffaf9;

        &_icon {
            width: 10px;
            height: 10px;
            margin-right: 4px;
            border-radius: 50%;
            background: #ff6b00;
        }
    }

    .location {
        display: flex;
        align-self: start;
        margin-top: 23px;

        &_title {
            margin-right: 23px;
        }
    }

    .cusRemarkText {
        width: 580px;
    }

    .preview {
        width: 580px;
        margin: 16px 0 14px;

        .remark_title {
            display: flex;
            align-items: center;
        }

        .rear {
            position: relative;

            .cus_name {
                position: absolute;
                left: 120px;
                top: -1px;
            }
        }

        .left_icon {
            width: 20px;
            height: 20px;
            margin-right: 6px;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            background: linear-gradient(139deg, #68a0ff 0%, #3f63eb 100%);

            img {
                width: 10px;
                height: 10px;
            }
        }

        :deep(.el-input-group__prepend) {
            padding: 0 14px;
            background: #fff;

            &:nth-child(1) {
                border-right: none;
            }
        }

        :deep(.el-input__wrapper) {
            background-color: #fff;

            .el-input__inner {
                border: none;
            }
        }
    }

    .textarea {
        margin-bottom: 40px;
    }

    :deep(.el-textarea__inner) {
        border: none;
        box-shadow: none;
        background: #fbfbfb;
    }

    :deep .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
        width: 110px;
    }

    :deep .el-input--prefix .el-input__inner {
        width: 110px;
        padding: 0 12px;
    }

    .hour_border {
        width: 14px;
        margin: 0 13px;
        border-top: 1px solid #969696;
    }
}

.examine {
    padding: 20px 30px;
    background: #f9f9f9;
    border: 1px solid #eaeaea;
    border-radius: 1px;

    &_top {
        display: flex;

        .examine_img {
            margin-right: 12px;
        }
    }

    &_info {
        &_name {
            font-size: 14px;
        }

        .ex_phone {
            display: flex;
            align-items: center;
            margin-top: 11px;

            .info_icon {
                width: 18px;
                height: 18px;
                font-size: 12px;
                text-align: center;
                line-height: 18px;
                color: #fff;
                background: #74ddf4;
                border-radius: 50%;
            }
        }
    }

    .describe {
        margin-top: 10px;
        width: 450px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.btns {
    margin-top: 20px;
    margin-bottom: 20px;
    position: absolute;
    bottom: 0;
    background: #fff;
    padding: 10px;
    text-align: center;
    left: 20px;
    right: 20px;
    box-sizing: border-box;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    border-radius: 1px;
    opacity: 1;
    border: 1px solid #eaeaea;
}

.must_icon {
    color: #ff6b00;
}
</style>
